import React, { useState } from 'react';
import { Dispatch, AnyAction } from 'redux';
import { connect } from 'react-redux';


import styles from './Button.module.scss';
import { clickAction } from './../store/actions';

type buttonBase = {
    name: string;
    dispatch?: Dispatch;
    btnClick: (text: string) => AnyAction
}

const Button: React.FunctionComponent<buttonBase> = ({name, btnClick})=>{
    const [value, setValue] = useState('');
    return (
        <React.Fragment>
            <input value={value} onChange={e=>setValue(e.target.value)}/>
            <span>{value}</span>
            <button className={styles.button} onClick={e=>btnClick(value)}>{name}</button>
        </React.Fragment>
    )
};

// mapStateToProps
// mapDispatchToProps
const ButtonContainer = connect(function(state){
    return {}
}, function(dispatch: Dispatch, ownProps: buttonBase) {
    return {
        btnClick: (text: string) => dispatch(clickAction(text))
    }
})(Button);

export { ButtonContainer, buttonBase };